<template>
  <div class="container">
    <el-card class="meter-nav">
      <MeterTree :data="meterStore.treeDataForChart"></MeterTree>
    </el-card>
    <el-card body-style="height: 90%;" class="meter-report-card">
      <template #header>
        <div class="meter-report-title">
          {{ currentTitle }}
        </div>
        <div @click="switchComponent" class="meter-report-icon">
          <!-- hover提示 -->
          <el-tooltip content="切换报表类型" placement="top">
            <i class="fa fa-exchange"></i>
          </el-tooltip>
        </div>
      </template>
      <component :currentMeter="meterStore.currentMeter" :is="currentComponent"></component>
    </el-card>
  </div>
</template>

<script setup>
import { shallowRef, computed } from "vue";
import { useMeterStore } from "@/stores/meter";
import MeterTree from "@/components/meter/MeterTree.vue";
import { getAsyncComponent } from "@/utils/asyncComponentLoader";
const MeterReportDaily = getAsyncComponent(() =>
  import("./components/MeterReportDaily.vue")
);
const MeterReportDailyDetail = getAsyncComponent(() =>
  import("./components/MeterReportDailyDetail.vue")
);
let GAS_TYPE = 3;
const meterStore = useMeterStore();

const currentComponent = shallowRef(MeterReportDailyDetail);
const currentTitle = computed(() => {
  return currentComponent.value === MeterReportDailyDetail
    ? "按时段报表"
    : "按日报表";
});
const switchComponent = () => {
  if (currentComponent.value === MeterReportDaily) {
    currentComponent.value = MeterReportDailyDetail;
  } else {
    currentComponent.value = MeterReportDaily;
  }
};

// 获取水表
const getMeters = async () => {
  await meterStore.fetchMeterList({
    type: GAS_TYPE,
  });
  meterStore.setCurrentMeter(meterStore.treeDataForChart[0]);
};

getMeters();
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.meter-nav {
  flex: 1;
  border-radius: 4px;
  margin-right: 1rem;
  overflow: auto;
  max-width: 18rem;
}

.meter-report-card {
  flex: 3;
  border-radius: 4px;
  height: 100%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.meter-report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}
</style>
